<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,width=device-width,initial-scale=1.0"/>
    <meta name="format-detection" content="telephone=no,email=no,date=no,address=no">
    <title>首页</title>
    <link rel="stylesheet" href="../aui/css/aui.2.0.css">
    <link rel="stylesheet" href="loadingbar.css">
    <style type="text/css">
        .aui-list .aui-list-item-media {
            width: 6rem;
        }
        .aui-list:before{
            background: #fff;
        }
        #aui-slide3 img{
            min-height: 10rem;
        }
    </style>
</head>
<body>
<div class="aui-content" id="app">
    <div class="aui-padded-l-15 aui-margin-t-10">
        <h2>头条新闻</h2>
    </div>
    <ul class="aui-list aui-media-list">
        <li class="aui-list-item" v-for="(vo,index) in list">
            <div class="aui-media-list-item-inner">
                <div class="aui-list-item-inner">
                    <div class="aui-list-item-text">
                        <div class="aui-list-item-title aui-font-size-18">
                            {{ vo.title }}
                        </div>
                    </div>
                    <div class="aui-info aui-padded-b-0">
                        <div class="aui-info-item aui-font-size-12">
                            时间：{{ vo.create_time|time }}
                        </div>
                    </div>
                </div>
                <div class="aui-list-item-media">
                    <img :src="vo.url">
                </div>
            </div>
        </li>
    </ul>
</div>
</body>
</html>
<script src="vue2.1.js"></script>
<script src="vue-resource.js"></script>
<script src="loadingbar.js"></script>
<script>

    /**php版本的问题，导致我们写的php代码没有生效。
    //vue-resource ajax 跨域跳过的坑
    //php核心代码
     header('Access-Control-Allow-Origin:*');
     header("Access-Control-Allow-Headers: Origin, X-Requested-With, Content-Type, Accept");
     header('Access-Control-Allow-Methods: GET, POST, OPTIONS');


     php版本也是需要测试，选一个稳定的版本

     **/
    //new Vue({}).loadingBarDelay = 100;
    Vue.filter('time', function (value) {
        return new Date(parseInt(value) * 1000).toLocaleString().replace(/\/|\//g, "-").replace(/上午/g, " ");
    });
    var vm = new Vue({
        el: '#app',
        data: {
            list: [],
            index_url: 'http://www.test8.com/app/cms/index'
        },
        methods: {
            init:function () {
                // 传统写法
                vm.$http({
                    method:'POST',
                    url: vm.index_url,
                    //使用定义的全局变量 用$get()获取
                    data:{
                        'id':2,
                        'name':'name'
                    }
                }).then(function(response){
                    var ret = JSON.parse(response.data);//固定的写法,得到api返回的完整的json数据
                    vm.list = ret.data.list;//赋值给vm的list属性
                },function(error){
                    console.log('响应失败');
                })
            }
        },
    	watch: {
    		c: {
    		  handler: function (val, oldVal) {

    		  },
    		  deep: true
    		}
    	}
    });


</script>
